<template>
  <div class="solution-detail">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-form
      v-if="this.stage == 2"
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="方案附件" prop="fileId" required>
            <el-upload
              ref="fileId"
              :file-list="fileIdfileList"
              :action="fileIdAction"
              :before-upload="fileIdBeforeUpload"
              :limit="1"
              :on-success="handleUploadSuccess"
              :on-remove="handleRemove"
              :headers="headers"
            >
              <el-button size="small" type="primary" icon="el-icon-upload"
                >点击上传</el-button
              >
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item size="mini">
            <el-button type="primary" size="mini" @click="submitForm"
              >提交附件</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form
      ref="elForm2"
      :model="formData2"
      :rules="rules2"
      size="medium"
      label-width="100px"
      v-if="this.stage == 3"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="签约模式" prop="signModel">
            <el-select
              v-model="formData2.signModel"
              placeholder="请选择签约模式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in signModelOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item size="mini">
            <el-button type="primary" size="mini" @click="submitForm2"
              >提交签约模式</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";
import { getToken } from "@/utils/auth";
import {
  uploadSolution,
  getProjectDetail,
  boConversion,
} from "@/api/project/index";
export default {
  components: {
    BasicBusiness,
    Step,
  },
  data() {
    return {
      formData: {
        fileId: null,
      },
      formData2: {
        signModel: undefined,
      },
      stage: null,
      rules: {
        fileId: [
          {
            required: true,
            message: "请上传解决方案",
            trigger: "change",
          },
        ],
      },
      rules2: {
        signModel: [
          {
            required: true,
            message: "请选择签约模式",
            trigger: "change",
          },
        ],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileIdAction:
        "http://business.byteturing.com" +
        process.env.VUE_APP_BASE_API +
        "/common/upload",
      fileIdfileList: [],
      signModelOptions: [
        {
          label: "直接签约",
          value: 1,
        },
        {
          label: "招标",
          value: 2,
        },
        {
          label: "商机作废",
          value: 3,
        },
      ],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});

      getProjectDetail(this.boId).then((res) => {
        ;
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        // 提交解决方案
        uploadSolution({ boId: this.boId, fileId: this.formData.fileId }).then(
          (res) => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$router.replace('/solution/index')
          }
        );
      });
    },
    submitForm2() {
      this.$refs["elForm2"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        // 提交解决方案
        boConversion({
          boId: this.boId,
          signModel: this.formData2.signModel,
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace('/solution/index')
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    fileIdBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 100;
      if (!isRightSize) {
        this.$message.error("文件大小超过 100MB");
      }
      return isRightSize;
    },
    handleUploadSuccess(res, file) {
      this.formData.fileId = res.fileId;
    },
    handleRemove() {
      this.formData.fileId = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.solution-detail {
}
</style>
